
<template>
<div  ref="backImg" style="margin: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);opacity: 100%; " >
  <transition  name="card-expand">
    <div ref="dis" style=""  @mouseover="toggleExpand"  @mouseout="toggleExpand"   @click="toPage()" class="card" :class="{
          'is-expanded': isExpanded
        }">
      <div style="float: right;  margin-right: 20px; " >
        <p  v-for="e in title"> {{e}} </p>
        <span :class="'iconfont '+iconClass" ></span>
      </div>

      <div v-show="isExpanded"  style="width: 200px; height: 250px;
         writing-mode: vertical-rl;
         text-orientation: upright;
         float: left"> {{context}}

      </div>
    </div>


  </transition>
</div>
</template>

<script>

export default {
  name: "catrtion",
  data() {
    return {
      isExpanded: false,
      isDisplay:false,
    };
  },
  props:{
    title:"",
    context: "",
    toPagePath:'',
    iconClass:'',
    activeName:''
  },
  //
  mounted() {
    // this.$refs.dis.style.backgroundColor = 'white'
    let str = '../assets/dao-back.png';
    // this.$refs.backImg.style.backgroundImage = `url(${str}})`
  },
  methods: {
    /**
     * 跳转页面
     */
    toPage(){
      console.log("点击事件")
      console.log(this.activeName)
      let url = this.$props.toPagePath
      let value =  this.activeName
      this.$router.push({
        path: url,
        query:{
          activeName:value
        }
      })
    },
    toggleExpand() {
     this.isExpanded = !this.isExpanded;
    },

  }
}
</script>

<style scoped>

.card {
  width: 120px;
  height: 300px;
  opacity: 100%;
  font-size: 16px;
  font-family: "Britannic Bold",serif;
  border-radius: 5px;
  overflow: hidden;
  z-index: 5;
  transition: all 0.5s ease;
  cursor: pointer;
}

.is-expanded {
  width: 500px;
  height: 300px; /* 调整为你想要的扩展尺寸 */
}

/* 定义过渡效果 */
.card-expand-enter-active,
.card-expand-leave-active {
  transition: all 0.5s ease;
}

/* 扩展开始时的状态（可选，取决于你的视觉需求） */
.card-expand-enter {
  opacity: 0;
  transform: scale(0.8);
}

/* 收缩结束时的状态（可选） */
.card-expand-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

</style>